<template>
	<view class="container">
		<navbar :config="config" backColor="#000"></navbar>
		<view id="page-top">
			<view class="product">
				<view class="u-bg-fff pb40">
					<view class="pic">
						<!-- <image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/delImg/product2.png" mode="aspectFill"></image> -->
						<!-- <j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx"></j-video> -->
						<swiper class="swiper" indicator-dots="true" :autoplay="true" interval="5000" duration="1500"
							circular="true">
							<swiper-item v-if="dataForm.video_url">
								<j-video class="jvideo" :url="dataForm.video_url" width="750rpx"
									height="620rpx"></j-video>
							</swiper-item>
							<swiper-item v-for="(item, index) in imglist" :key="index">
								<image :src="item" mode="aspectFill"></image>
							</swiper-item>
						</swiper>

						<view class="p-price">
							<view class="pd24 u-flex-center" style="align-items: baseline;">
								<view class="u-FFF u-font36">
									<rich-text :nodes="$mUtil.priceBigSmallTwo(dataForm.min_price)"></rich-text>
								</view>
								<text class="discount u-font24 u-ml20 u-del">￥{{ dataForm.min_sale_price }}</text>
								<!--  <text class="discount u-font24 u-ml15"
			            >{{ dataForm.discount }}折</text
			          > -->
							</view>
							<view class="p-ab u-flex-center">
								<view class="triangle-bottomright"></view>
								<view class="seckill u-text-center u-font28">
									<!-- active_state 0：未开始 * 1：进行中 * 2：已结束 -->
									<!--  <view class="u-bold" style="padding: 20rpx;" v-if="dataForm.active_state == 2"
			              >已结束</view -->

									<view class="u-bold" v-if="dataForm.active_state == 1">距结束</view>

									<view class="u-bold" v-if="dataForm.active_state == 0||dataForm.active_state == 2">
										已结束</view>
									<view v-if="dataForm.active_state != 2">
										<uni-countdown :backgroundColor="'none'" @timeup="overDown1" :color="'#FF211F'"
											:splitorColor="'#FF211F'" :show-day="time1[0] > 0" :day="time1[0]"
											:hour="time1[1]" :minute="time1[2]" :second="time1[3]"></uni-countdown>
									</view>
								</view>
							</view>
						</view>

						<view class="mt10 u-plr30">
							<view>
								<!-- style="vertical-align: middle;" -->
								<view v-if="shop.platform_shop" class="tipsStatus" style="background-color: #FF211F;">自营</view>
								<text class="u-font40 u-474747">{{ dataForm.title }}</text>
							</view>
							<view class="u-font28 u-mt15 u-AAAAAA" style="display: flex;align-items: center;justify-content: space-between;">
								<view class="tipsStatus" style="background: #FF211F" v-if="getTradeTypeName(dataForm.trade_type_id) != null">{{getTradeTypeName(dataForm.trade_type_id)}}</view>
								<text>已售
									<text class=" u-mr5 u-ml5" style="color:#FF211F">{{ dataForm.result_sale_num }}</text>件，仅剩<text
										class="u-FF721B u-mr5 u-ml5">{{
			              dataForm.residue_stock_total
			            }}</text>件</text>
						
						<view v-if="dataForm.consumption_value">贡献值：{{ $mUtil.isToFixedNum(dataForm.consumption_value, 2) }}</view>
						
							
						<view v-else>贡献值：0</view>
						</view>
							<!--优惠-->
							<!-- <view
			          class="bg-FFF6EE pd20 u-mt20 u-flex-center br-rd10"
			          v-if="shopDiscounts.is_use == true"
			        >
			          <view class="u-FF0000 br-FF0000 u-font24">首单优惠</view>
			          <view class="u-ml15 u-font24 u-CA7E57"
			            >满{{ shopDiscounts.full }}元减{{
			              shopDiscounts.reduction
			            }}元</view
			          >
			        </view> -->
						</view>
					</view>
				</view>

				<view class="u-bg-fff u-mt10">
					<view class="u-plr30 u-flex-center-sb pt-pb35">
						<view class="u-flex-center">
							<view @click="goShop">
								<image class="u-avatar104" :src="shop.logo"></image>
							</view>
							<view class="u-ml25">
								<view class="u-font32 u-474747">{{ shop.shop_name }} </view>
								<view class="u-AAAAAA u-font24 u-mt5 u-text2" @click="goLocal">
									<!-- <text class="iconfont" style="color: u-FF721B;">&#xe6db;</text> -->
									{{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
			            }}{{ shop.address }}
								</view>
							</view>
						</view>
						<view class="iconfont" @click="goShop" style="color: rgb(71,71,71);font-weight: bold;">&#xe6c7;
						</view>
					</view>
				</view>
			</view>



			<view class="u-bg-fff u-mt10">
				<view class="tab u-flex-center-sa u-font30 u-474747 u-border-one-one"
					:style="Style">
					<view class="box-border">
						<view @tap="change(0)" class="tabColor" :class="{ active: isChecked == 0 }">商品详情</view>
						<view @tap="change(1)" class="tabColor" :class="{ active: isChecked == 1 }">
							用户评论({{ commentList.length }})</view>
					</view>
				</view>
				<view class="u-mt30">
					<!--商品详情-->
					<view v-if="isChecked == 0">
						<view class="richText ql-editor-box">
							<rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
							<!-- <jyf-parser :html="$mUtil.formatRichText(goodsInfo.mobile_detail)" ref="article"></jyf-parser> -->
						</view>
					</view>

					<!--评论-->
					<view class="u-plr30" v-else>
						<comment :value="commentList"></comment>
					</view>
				</view>
			</view>
		</view>
		<view style="height:170rpx;background-color:white"></view>
		<view class="bottom-btn u-bg-fff">
			<view class="pt-pb30 u-plr30 u-flex-center-sb">
				<!-- <button @click="share" class="u-text-center" style="line-height: normal;margin-left: 25rpx;">
          <view class="iconfont2 u-font44 u-999">&#xe684;</view>
          <view class="u-font28 u-1A1A1A">分享</view>
        </button> -->
				<button @click="share" class="u-text-center" style="line-height: normal">
					<!-- <view class="iconfont2 u-font44 u-999">&#xe684;</view> -->
					<image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/product/share.png" style="width: 46rpx;height: 46rpx;"></image>
					<view class="u-font28 u-474747 marginTop">分享</view>
				</button>

				<!--秒杀按钮-->
				<view class="seckill-btn" v-if="dataForm.active_state==0">
					<button v-if="ispay" class="u-btn-two u-DCCDA4 " 
					style="background-color: #FF211F;"
					@click="notStarted()">
						立即购买
					</button>
				</view>
				<view class="seckill-btn" v-if="dataForm.active_state==1">
					<button v-if="ispay" class="u-btn-two u-DCCDA4 " style="background-color: #FF211F;"
					@click="buy(1, dataForm.id)">
						立即购买
					</button>
				</view>
				<view class="seckill-btn" v-if="dataForm.active_state==2">
					<button v-if="ispay" class="u-btn-two u-DCCDA4 "
					 style="background-color: #FF211F;"
					 @click="itSover(1, dataForm.id)">
						立即购买
					</button>
				</view>

			</view>
		</view>

		<!--规格-->
		<uniPopup type="bottom" ref="specOpen">
			<view class="u-bg-fff spec">
				<view class="u-plr30 flex-sb u-border-one-one pb30">
					<view class="u-flex-center">
						<image class="u-goods200" :src="choseConfig.cover ? choseConfig.cover : cover"></image>
						<view class="u-ml20">
							<view class="u-AAAAAA u-font28 u-flex-center">
								<view class="u-FF721B u-font36">
									<rich-text :nodes="
                      $mUtil.priceBigSmall(
                        choseConfig.activity_price
                          ? choseConfig.activity_price
                          : moPrice
                      )
                    "></rich-text>
								</view>
								<!-- choseConfig.market_price ? choseConfig.market_price : moDelPrice -->

								<text
									class="u-del u-ml15">￥{{ choseConfig.market_price ? choseConfig.sale_price : moDelPrice }}
								</text>
								<!-- <text class="u-ml10">{{ dataForm.discount }}折</text> -->
							</view>
							<view class="u-font26 u-AAAAAA u-mt5"  style="padding-left: 4px;">活动库存 {{ stock }} 件
								<text class="u-ml30">商品库存{{choseConfig.able_stock?choseConfig.able_stock:goods_total_stock}}</text>
							</view>
							<view class="u-AAAAAA u-mt25" style="padding-left: 4px;">{{
                  choseConfig.sku_set_name ? choseConfig.sku_set_name : "请选择"
                }}
							</view>
						</view>
					</view>
					<view class="iconfont u-AAAAAA closeIcon" @click="specOpenClose">&#xe612;</view>
				</view>

				<view>
					<view class="">
						<view class="u-mt30" v-for="(item, index) in skuTab" :key="item.head.id">
							<view class="u-plr30 u-474747">{{ item.head.name }}</view>
							<view class="u-mt20 u-border-one-one pb30">
								<view class="u-plr30 u-flex u-flex-warp">
									<view class="spec-item" :class="childrenItem.flag ? 'activeColor' : ''"
										@click="chonseSku(index, childrenItem.id)" v-for="childrenItem in item.values"
										:key="childrenItem.id">{{ childrenItem.name }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="u-plr30 u-mt30">
						<view class="u-flex-center-sb">
							<view class="u-474747">购买数量</view>
							<view class="u-flex-center">
								<view class="iconfont minus" @click="resNum">&#xe60b;</view>
								<view class="num">{{ add_num }}</view>
								<view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
							</view>
						</view>
						<view class="specOpen-btn">
							<view v-if="btnType == 0">
								<button class="u-btn-two" @click="btnBuy(btnType)">
									{{ btnName }}
								</button>
							</view>
							<view v-else>
								<button class="u-btn-two" @click="btnBuy(btnType)">
									{{ btnName }}
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uniPopup>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
		<share ref="shares" :contentHeight="580" v-if="isvisible"></share>
	</view>
</template>

<script>
	import uniPopup from "../../../components/uni-popup/uni-popup.vue";
	import comment from "../../../components/ld-comment/ld-comment.vue";
	import jyfParser from "../../../components/jyf-parser/jyf-parser";
	import ImgUpload from "../../../components/uploadImg/imgUpload.vue";
	import share from "./../../public/share";
	import jVideo from "../../../components/j-video/j-video.vue"
	let app = getApp()
	export default {
		components: {
			uniPopup,
			comment,
			jyfParser,
			ImgUpload,
			share,
			jVideo
		},
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "商品详情",
					backTabPage: "",
					back: true, //false是tolbar页面 是则不写
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#F9F9F9"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				imglist: [], //详情图片数组
				isChecked: 0,
				btnName: "",
				btnType: "", //0  购物车，1 立即购买
				dataForm: {}, //商品详情
				shop: {}, //店铺信息
				shopDiscounts: {}, //店铺首单优惠
				stock: 0,
				goods_total_stock: 0,
				cover: "",
				loading: true,
				moDelPrice: "",
				moPrice: "",
				goodsSkuList: [], //sku组合值
				skuTab: [], //sku二位数组
				goods_id: null,
				limit_buy_num: 0,
				choseConfig: {},
				hasId: "",
				add_num: 1,
				goStatus: 0, //0:购物车，1下单
				shop_id: 0,
				commentList: [],
				goodsInfo: {},
				isvisible: false,
				time1: [0, 0, 0, 0],
				ispay: app.globalData.openPay,
				third: false,
				trade_type_id: 0
			};
		},
		onShow() {
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			if (prevPage == undefined) {
				// this.config.backTabPage = "/pages/research/homepage/lidaPage";
			}
		},
		onLoad(options) {
			//当用户进来有缓存店铺

			//店铺推荐（商品）
			if (options.id) {
				this.getDetailInfo(options.id);
			}
			if (options.shareId) {
				this.recordSave(options.shareId, options.id);
			}
		},
		onShareAppMessage(res) {
			if (res.from === "button") {
				// 来自页面内分享按钮
				console.log(res.target);
			}

			return {
				title: this.shareTitle,
				imageUrl: this.shareImg,
				path: `/pages/product/goods/seckillGoods?id=${this.dataForm.id}`,
			};
		},
		computed: {
			Style() {
				return `height:${this.statusBarHeight}px`;
			}
		},
		methods: {
			getTradeTypeName(id) {
				// 1=保税直供，2=完税进口，3=国内贸易，4=香港直邮，5=海外直邮
				if (id == 1) {
					return '保税直供'
				} else if (id == 2) {
					return '完税进口'
				} else if (id == 3) {
					return '国内贸易'
				} else if (id == 4) {
					return '香港直邮'
				} else if (id == 5) {
					return '海外直邮'
				}
			},
			notStarted() {
				this.$mUtil.toast("活动尚未开始")
			},
			itSover() {
				this.$mUtil.toast("活动已结束")
			},
			goLocal() {
				uni.openLocation({
					latitude: Number(this.shop.tx_latitude),
					longitude: Number(this.shop.tx_longitude),
					name: this.shop.name,
					address: this.shop.address,
					success: function() {
						console.log("success");
					},
				});
			},
			goShop() {
				uni.navigateTo({
					url: "/pages/research/homepage/shopHomepage?shopId=" + this.shop_id,
				});

			},
			recordSave(share_user_id, goods_id) {
				this.$http
					.post("/share/record/save", {
						share_user_id: share_user_id,
						goods_id: goods_id,
					})
					.then((res) => {});
			},

			share() {
				let token = uni.getStorageSync("token");

				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login",
					});
				} else {
					let user = uni.getStorageSync("personal");
					this.isvisible = true;
					this.$nextTick(() => {
						this.$refs.shares.shareInfo(
							"/?pageType=1&type=2&id=" + this.dataForm.id + "&shareId=" + user.id,
							'pages/down',
							this.dataForm.title,
							"",
							this.dataForm.cover
						);
					});
				}
			},
			// 获取主页数据
			getIndexList(shopid) {
				this.$http.get("/yxt/shop/info/" + shopid).then((res) => {
					uni.stopPullDownRefresh();
					this.loading = false;
					if (res.data && res.code == 200) {
						this.shop = res.data;
					}
				});
			},
			getByShop(id) {
				//店铺优惠查询
				this.$http.get("/marketing/firstOrder/getByShop/" + id).then((res) => {
					if (res && res.code == 200) {
						this.shopDiscounts = res.data;
					}
				});
			},
			getDetailInfo(id) {
				this.$http
					.get("/marketing/seckillActivityGoods/info/" + id)
					.then((res) => {
						this.loading = false;
						if (res && res.code == 200) {
							this.dataForm = res.data;
							this.shop_id = res.data.shop_id;
							this.third = res.data.third;
							this.trade_type_id = res.data.trade_type_id;
							this.$http
								.get("/marketing/firstOrder/getByShop/" + this.shop_id)
								.then((res) => {
									if (res && res.code == 200) {
										this.shopDiscounts = res.data;
									}
								});
							this.$http.get("/yxt/shop/info/" + this.shop_id).then((res) => {
								if (res.data && res.code == 200) {
									this.shop = res.data;
								}
							});
							this.imglist = res.data.cover.split(",");
							//  active_state 0：未开始 * 1：进行中 * 2：已结束

							if (res.data.active_state == 0 || res.data.active_state == 2) {
								this.time1 = this.$mUtil
									.countDown(res.data.will_start_time)
									.split(":").map(val => Number(val));
							} else {
								this.time1 = this.$mUtil
									.countDown(res.data.finish_time)
									.split(":").map(val => Number(val));
							}
							this.$http
								.get(`/goods/content/${this.dataForm.goods_id}`)
								.then((res) => {
									if (res && res.code == 200) {
										this.goodsInfo = res.data;
									}
								});
							this.$http
								.get(
									`/comment/orderGoods/getgoodscomments/${this.dataForm.goods_id}`
								)
								.then((res) => {
									if (res && res.code == 200) {
										this.commentList = res.list;
									}
								});
						}
					});
			},
			goTocart() {
				uni.navigateTo({
					url: "/pages/index/shop",
				});
			},
			//点击拼团更多
			goGb() {
				this.$refs.gbOpen.open();
			},
			//点击关闭
			gbClose() {
				this.$refs.gbOpen.close();
			},
			//评论，商品详情切换
			change(i) {
				this.isChecked = i;
			},
			//点购物车，立即购买
			buy(i, id) {
				this.btnType = i;
				this.checkSku(id);
				if (i == 0) {
					this.btnName = "加入购物车";
				} else {
					this.btnName = "立即购买";
				}
			},
			// 减数量
			resNum() {
				if (this.add_num > 1) {
					this.add_num--;
				}
			},
			//加数量
			addNum() {
        // limit_buy_num == 0表示不限购
        if(this.limit_buy_num > 0 && this.add_num >= this.limit_buy_num){
          this.$mUtil.toast("购买数量已达到限购数量");
          return;
        }
				this.add_num++;
			},
			chonseSku(index, id) {
				this.skuTab[index].values.forEach((res) => {
					res.flag = false;
					if (res.id == id) {
						res.flag = true;
					}
				});
				let choseId = [];
				this.skuTab.forEach((res) => {
					res.values.forEach((Key) => {
						if (Key.flag) {
							choseId.push(Key.id);
						}
					});
				});
				let totalId = choseId.join("|");
				this.hasId = totalId;
				this.goodsSkuList.forEach((res) => {
					if (res.sku_hash_code == totalId) {
						this.choseConfig = res;
						
						this.stock = this.dataForm.real_stock_total;
						this.able_stock = res.able_stock;
					}
				});
				console.log("选择规格",this.choseConfig)
			},
			//查询sku
			checkSku(id) {
				this.$http
					.get(`/marketing/seckillActivityGoods/skus/${this.dataForm.id}`)
					.then((res) => {
						this.loading = false;
						// console.log(res.data.goods_total_stock)
						this.goods_total_stock = res.data.goods_total_stock
						if (res && res.code == 200) {
							this.choseConfig = {};
							this.hasId = ''
							res.data.goods.sku_table.forEach((keys) => {
								keys.values.forEach((val) => {
									val.flag = false;
								});
							});
							this.limit_buy_num = this.dataForm.limit_buy_num;
							this.goods_id = this.dataForm.goods_id;
							this.goodsSkuList = res.data.goods_sku_list;
							this.moPrice = this.dataForm.min_price;
							this.moDelPrice = this.dataForm.min_sale_price;
							this.cover = this.imglist[0];
							this.stock = this.dataForm.real_stock_total;
							if (res.data.goods_auth) {
								if (res.data.goods_auth.added) {
									this.$refs.specOpen.open();
								} else {
									this.$mUtil.toast("该商品已经下架");
								}
							} else {
								this.$mUtil.toast("没有经营权限");
							}
							//只有没数据才去重新渲染sku的数据
							if (this.skuTab.length == 0) {
								this.skuTab = res.data.goods.sku_table;
								for (let i in this.skuTab) {
									//默认选中第一个可选项
									this.skuTab[i].values[0].flag = true;
								}
								//显示选中的sku信息
								//this.chonseSku(0, this.skuTab[0].values[0].id);
							}
							//显示选中的sku信息
							this.chonseSku(0, this.skuTab[0].values[0].id);
							// if(res.data.goods.sku_table.length>0){
							// 	this.$refs.specOpen.open()
							// }else{
							// 	this.hasId = ''
							// 	this.btnBuy()
							// }
						}
					});
			},
			//关闭规格弹窗
			specOpenClose() {
				this.$refs.specOpen.close();
			},
			//加入购物车
			btnBuys() {
				// 判断是否选中sku
				if (this.skuTab.length > 0 && this.hasId == "") {
					this.$mUtil.toast("请选中sku");
					return false;
				}

				// 判断限购
				if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
					this.$mUtil.toast("商品限购" + this.limit_buy_num + "件");
					return false;
				}
				//判断库存
				if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
					this.$mUtil.toast("商品库存只有" + this.able_stock + "件");
					this.$http.post(`/singlegoods/understockrecord/save`, {
						shop_id: this.shop_id,
						goods_id: this.goods_id,
						single_goods_id: this.choseConfig.single_goods_id,
						sku_set_name: this.choseConfig.sku_set_name,
						buy_num: this.add_num
					}).then((res) => {

					});
					return false;
				}
				if (this.goStatus == 0) {
					let data = {
						goods_id: this.goods_id,
						sku_hash_code: this.hasId,
						add_num: this.add_num,
						source_shop_id: this.shop_id.toString(),
					};
					
					
					
					
					this.$http.post(`/cart/add`, data).then((res) => {
						if (res && res.code == 200) {
							this.$mUtil.toast("添加成功");
							this.$refs.specOpen.close();
							this.choseConfig = {};
							this.add_num = 1;
							this.cartList();
						}
					});
				} else {
					this.psotJson();
				}
			},
			//组合数据
			psotJson() {
				// this.loading = true;
				let dataJson = {};
				let childArr = [];
				let parendArr = [];
				// let shop = uni.getStorageSync('shop')
				// let shopid = shop.id ? shop.id : ''
				this.choseConfig;
				console.log("this.choseConfig",this.choseConfig)
				console.log("this.hasId",this.hasId)
				childArr.push({
					user_cart_id: 0,
					activity_goods_id: this.choseConfig.activity_goods_id,
					goods_id: this.goods_id,
					num: this.add_num,
					sku_hash_code: this.hasId,
					
				});
				parendArr.push({
					shop_id: this.shop.id,
					source_shop_id: this.shop.id,
					activity_id: this.dataForm.seckill_id, //活动id
					sponsor_activity_id: 0, //拼团id
					user_remark: "",
					items: childArr,
				});
				dataJson = {
					is_cart: false, //是否来源于购物车
					receipt_id: null, //收货地址ID
					shipment_mode: 0, //0物流，1自提
					shop_orders: parendArr,
					marketing_type: 1, //0无活动，1秒杀，2拼团
				};
				uni.setStorageSync("dataJson", dataJson);
				uni.navigateTo({
					url: "../surePay/surePaySechill?third=" + this.third + '&trade_type_id=' + this.trade_type_id,
				});
				// let shop = uni.getStorageSync('shop')
				// let shopid=shop.id?shop.id:''
				// this.loading = false;
				// this.$http.post(`/order/build`, dataJson).then(res => {
				// 	if (res && res.code == 200) {
				// 		uni.setStorageSync('sureData', res.data)
				// 		uni.navigateTo({
				// 			url: '../surePay/surePay'
				// 		})
				// 	}
				// })
			},
			//
			btnBuy(i) {
				this.goStatus = i;
				let token = uni.getStorageSync("token");
				//判断是否微信授权登录（没有授权登录进wx-login,授权了但没有注册进login）
				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login",
					});
				} else {
					
					  var random= Math.floor(Math.random() * 10) + 1;
					console.log("random",random)
					 if(random<6){
						 
						 this.$mUtil.toast("当前网络繁忙请继续支付");
					 }else{
						 this.btnBuys();
					 }
					
					
					
					
				
				}

				//0  购物车，1 立即购买
			},
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.pd24 {
		padding: 24rpx;
	}

	.pd20 {
		padding: 20rpx;
	}

	.pt20-pb14 {
		padding-top: 20rpx;
		padding-bottom: 14rpx;
	}

	.pt28-pb18 {
		padding-top: 28rpx;
		padding-bottom: 18rpx;
	}

	.pb30 {
		padding-bottom: 30rpx;
	}

	.pb40 {
		padding-bottom: 40rpx;
	}

	.pb50 {
		padding-bottom: 50rpx;
	}

	.pt-pb30 {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.pt-pb35 {
		padding-top: 35rpx;
		padding-bottom: 35rpx;
	}

	.ml54 {
		margin-left: 54rpx;
	}

	.ml138 {
		margin-left: 138rpx;
	}

	.br-rd10 {
		border-radius: 10rpx;
	}

	.br-rd20 {
		border-radius: 20rpx;
	}

	.stb-btn {
		padding: 8rpx 18rpx;
		border-radius: 10rpx;
	}

	.br-FF0000 {
		border: 1rpx solid #ff0000;
		border-radius: 24rpx;
		padding: 6rpx 12rpx;
	}

	.bg-FFF6EE {
		background-color: #fff6ee;
	}

	.mt80 {
		margin-top: 80rpx;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.product {
		// padding-bottom: 150rpx;
	}

	.pic {
		width: 100%;
		position: relative;

		.swiper {
			height: 620rpx;

			video {
				width: 100%;
				height: 620rpx;
			}

			image {
				width: 100%;
				height: 620rpx;
			}
		}

		.p-price {
			width: 100%;
			// position: absolute;
			top: 460rpx;
			// background: linear-gradient(90deg,#20a733, #0a824b);
			background: #FF211F;
			border-radius: 20rpx 20rpx 0px 0px;
			position: relative;
			top: -16rpx;

			.discount {
				color: #ffffff;
			}
		}
	}

	.richText {
		padding: 30rpx;

		/deep/ img {
			margin-top: 0 !important;
		}
	}

	//秒杀，拼团样式
	.p-ab {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
	}

	.stb-list {
		padding-bottom: 10rpx;
	}

	.triangle-bottomright {
		width: 0;
		height: 0;
		border-bottom: 105rpx solid #dccda4;
		border-left: 60rpx solid transparent;
	}

	.seckill {
		background-color: #dccda4;
		color: #FF211F;
		padding: 12rpx 15rpx;
		box-sizing: border-box;
		border-radius: 5rpx 20rpx 0px 0px;
		text-align: center;
		// width: 150rpx;
	}

	.seckill-btn {
		width: 76%;
	}

	.br-284534 {
		border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
	}

	.gb-te {
		padding-top: 20rpx;
		padding-bottom: 15rpx;
	}

	.gb-btn {
		padding: 18rpx 80rpx 8rpx;
		line-height: 30rpx;
	}

	.btn-bg-dccda4 {
		background: #dccda4;
		border-radius: 48rpx 0rpx 0rpx 48rpx;
	}

	.btn-bg-00321E {
		background: #0B844A;
		border-radius: 0px 48px 48px 0px;
	}

	.tab {
		width: 100%;
		position: sticky;
		top: 0;
		background-color: #fff;
		padding-top: 38rpx;
		z-index: 9;

		.box-border {
			width: 90%;
			border-bottom: 1rpx solid #e6e6e6;
			margin: 0 40rpx;
			display: flex;
			justify-content: space-around;
			padding: 20rpx 0;
		}

		.tabColor {
			position: relative;
			color: #474747;
			font-size: 36rpx;

			// &::before {
			// 	content: '';
			// 	position: absolute;
			// 	left: 50%;
			// 	bottom: 0;
			// 	transform: translateX(-50%);
			// 	width: 0;
			// 	height: 2px;
			// 	background: #474747;
			// 	transition: all 0.3s;
			// }

			&.active {
				color: #FF211F;
				// font-weight: 700;

				&::before {
					width: 100%;
				}
			}
		}
	}

	.bottom-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 9;
		border-top: 1rpx solid #e6e6e6;

		.cart {
			position: relative;

			.number {
				position: absolute;
				top: -10rpx;
				left: 45rpx;
				padding: 4rpx 8rpx;
				background-color: #FF211F;
				border: 4rpx solid #ffffff;
				border-radius: 40rpx;
			}
		}

		.cart-btn {
			width: 230rpx;
			height: 85rpx;
			background: #dccda4;
			border-radius: 43rpx 0rpx 0rpx 43rpx;
		}

		.buy-btn {
			width: 230rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #0B844A;
			border-radius: 0rpx 43rpx 43rpx 0rpx;
		}
	}

	.flex-sb {
		display: flex;
		justify-content: space-between;
	}

	//弹窗
	.spec {
		border-radius: 18rpx 18rpx 0rpx 0rpx;
		padding-top: 30rpx;
		max-height: 900rpx;
		overflow-y: auto;

		.spec-item {
			background-color: #f6f6f6;
			border: 1px solid #f6f6f6;
			padding: 12rpx 30rpx;
			font-size: 24rpx;
			color: #1a1a1a;
			border-radius: 4px;
		}

		.activeColor {
			background-color: #ffffff;
			border: 1px solid #FF211F;
			color: #FF211F;
			border-radius: 16rpx;
		}

		.spec-item:not(:last-child) {
			margin-right: 24rpx;
		}

		//减号
		.minus {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 15rpx 0rpx 0rpx 15rpx;
			color: #AAAAAA;
			border: 1rpx solid #dedede;
			font-size: 20rpx;
		}
		
		.num {
			width: 74rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border: 1px solid #dedede;
		}
		
		//加号
		.plus-sign {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #FFFFFF;
			color: #AAAAAA;
			border: 1rpx solid #dedede;
			border-radius: 0rpx 15rpx 15rpx 0rpx;
			font-size: 20rpx;
		}
		

		.specOpen-btn {
			margin-top: 68rpx;
			padding-bottom: 34rpx;

			button {
				background-color: #FF211F;
				color: #ffffff;
			}
		}
	}
</style>